<!DOCTYPE html>
<html lang="zh-CN">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <!-- 挂载点元素 -->
    <div id="root"></div>

    <!-- 
      类库文件

        react       React核心                window.React
        react-dom   React用于操作DOM的库       window.ReactDOM
    -->
    <script src="https://unpkg.com/react@18/umd/react.development.js"></script>
    <script src="https://unpkg.com/react-dom@18/umd/react-dom.development.js"></script>

    <script>
      /**
       * ReactDOM.render(Element, root)
       *    渲染元素
       *
       *        Element - 要渲染的元素
       *        root    - 容器，一个DOM对象
       *
       *    PS: 18版本之前的玩法，18版本不再推荐。
       *        18版本使用这种方式来渲染的话，会导致18版本中新增的很多特性（优化）无法生效
       *
       */
      // ReactDOM.render("Hello React", document.querySelector("#root"));

      /**
       * const root = ReactDOM.createRoot(container)
       *
       *    创建容器
       *
       *      container - 容器DOM对象
       *      root      - 容器
       *
       * root.render(Element)
       *
       *    渲染元素
       */
      const root = ReactDOM.createRoot(document.querySelector("#root"));
      root.render("Hello React");
    </script>
  </body>
</html>
